/**
 *
 * @author: yurfer (github.com/yurfer)
 * @date 2018-10-18 09:56:03
 * @version 1.0
 */

/*This component is a set of search component which in Ant Design*/
/*说明*/
/*整合搜索组件,
统一入口,使用对象数组的形式,配置如:组件数量,组件类型,组件关联value的属性名,组件样式,组件事件等等的内容
统一出口,使用对象的形式,键名为组件关联value的属性名,键值为组件对应的值
*重置时,统一返回值,类型为String的,返回"",类型为对象的,返回{},类型为数组的,返回[]
*/
import React, { PureComponent } from 'react';
import moment from 'moment';
import {
	Row,
	Col,
	Form,
	Input,
	Select,
	Icon,
	Button,
	InputNumber,
	DatePicker,
	Radio,
} from 'antd';

const FormItem = Form.Item;
const { Option } = Select;
const RangePicker = DatePicker.RangePicker;

@Form.create()
export default class GeneralFilterComponent extends PureComponent {
	state = {};

	componentDidMount() {};

	handleFormReset = () => {
		const { form, onClear } = this.props;
		form.resetFields();
		form.validateFields((err, fieldsValue) => {
			for (let [_key, _val] of Object.entries(fieldsValue)) {
				if (!_val && _val != 0 && typeof(_val) != 'object') {
					fieldsValue[_key] = '';
				}
			}
			onClear(fieldsValue)
			if (err) return;
		});
	};

	handleSearch = () => {
		const { form, onSearch } = this.props;
		form.validateFields((err, fieldsValue) => {
			for (let [_key, _val] of Object.entries(fieldsValue)) {
				if (!_val && _val != 0) {
					fieldsValue[_key] = '';
				}
			}
			onSearch(fieldsValue);
			if (err) return;
		});
	};

	render() {
		const { form, itemList, onClear, onSearch } = this.props;
		const { getFieldDecorator } = form;

		const wrapperCol_large = {
			xs: 24,
			sm: 24,
			md: 24,
			lg: 24,
			xl: 16,
			xxl: 12,
		};
		const wrapperCol = {
			xs: 24,
			sm: 24,
			md: 12,
			lg: 12,
			xl: 8,
			xxl: 6,
		};

		const renderFormItem = (items) => {
			let itemComponent = null;
			switch (items.type) {
				case 'input':
					itemComponent = (
						<Col {...wrapperCol} key={items.value} style={{whiteSpace: 'nowrap'}}>
							<FormItem label={<span style={{width: items.labelWidth ? items.labelWidth : 84, display: 'inline-block'}}>{items.label}</span>}>
								{getFieldDecorator(items.value)(
									<Input placeholder={items.placeholder} onChange={items.onChange}/>
								)}
							</FormItem>
						</Col>
					);
					break;
				case 'select':
					const optionItems = items.selectOption ? items.selectOption.map((item) =>
						<Option value={item.value} key={item.value}>{item.label}</Option>
					) : '';
					itemComponent = (
						<Col {...wrapperCol} key={items.value} style={{whiteSpace: 'nowrap'}}>
							<FormItem label={<span style={{width: items.labelWidth ? items.labelWidth : 84, display: 'inline-block'}}>{items.label}</span>}>
								{getFieldDecorator(items.value)(
									<Select style={{ width: items.width ? items.width : 120 }} placeholder={items.placeholder} onChange={items.onChange}>
										{ optionItems }
									</Select>
								)}
							</FormItem>
						</Col>
					);
					break;
				case 'rangePicker':
					itemComponent = (
						<Col {...wrapperCol_large} key={items.value} style={{whiteSpace: 'nowrap'}}>
							<FormItem label={<span style={{width: items.labelWidth ? items.labelWidth : 84, display: 'inline-block'}}>{items.label}</span>}>
								{getFieldDecorator(items.value, {
									initialValue: []
								})(
									<RangePicker
										ranges={items.showQuickChoose ? {
											近7天: [moment().subtract(7, 'days'), moment()],
											近14天: [moment().subtract(14, 'days'), moment()],
											近30天: [moment().subtract(30, 'days'), moment()],
										} : {}}
										placeholder={items.placeholder}
										onChange={items.onChange}
                    format={items.format ? items.format : 'YYYY-MM-DD'}
                    showTime={items.showTime}
									/>
								)}
							</FormItem>
						</Col>
					);
					break;
				default:
					break;
			}
			return itemComponent;
		}

		return (
			<div>
				<Row>
					<Col>
						<Form layout="inline">
						{
							itemList ? itemList.map(
								items => renderFormItem(items)
							)
							: ''
						}
						</Form>
					</Col>
				</Row>

				<Row>
					<Col>
						<Button style={{ marginLeft: 16, float: 'right' }} type="primary" icon="search" onClick={this.handleSearch}>查询</Button>
						<Button style={{ float: 'right' }} icon="reload" onClick={this.handleFormReset}>重置</Button>
					</Col>
				</Row>
			</div>
		);
	}
}
